<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>创建报价单</title>
    <%@ include file="/WEB-INF/views/include/head.jsp"%>
    <script src="${ctxStatic}/js/jquery-1.9.1.min.js"></script>
    <script src="${ctxStatic}/js/DateTimePicker.js"></script>
    <script src="${ctxStatic}/js/layer.js"></script>
    <script src="${ctxStatic}/js/style.js"></script>
    <script src="${ctxStatic}/layDate/laydate.js"></script>
    <link rel="stylesheet" href="${ctxStatic}/css/common_erp.css">
    <link rel="stylesheet" href="${ctxStatic}/css/layerSm.css">
    <script>
  //获取 iframe 数量 
	var frLength = window.parent.frames.length;
	//父画面下标 
	var parentIndex = frLength-2;
        $(document).ready(function(){
        	var index = $("#index").val();
        	var form = $("#inputForm");  
            form.validate();//验证指定的表单
            $(".btn").hide();
            //var html = window.parent.frames[parentIndex].$("tbody tr")[index].find("td#hiddenTD").html;
           	//$("#colorList").html();
           	//imageList("${bigcargoOrder.styleID}","${bigcargoOrder.styleFile}");
           	var trHtml = window.parent.frames[parentIndex].$("tbody").find("tr.table-TR #hiddenTable")[index].innerHTML;
           	$("#colorList").html(trHtml);
        	$('#tableSelect').find("select").select2();
        	if ($("#auditStatus").val() == 'AUDIT_STATUS-AUDIT_20') {
        		$("input,select").attr("disabled","disabled");
        		$("img").remove();
    		}
           	
        });
        /* 删除   */
   	 
   	 function deleteCurrentRow(obj){ 
   		 
   		 if (confirm("<spring:message code="contract_size_areYouSure"/>")) {
              var tr=obj.parentNode.parentNode;  
              var tbody=tr.parentNode 
              tbody.removeChild(tr);            
   			
   		}
   	 }
        
   function selectChange(obj){
		//var index = $(obj).parent().parent().index();
        var index = $(obj).get(0).selectedIndex;
        $(obj).find("option").attr("selected",false);
        $(obj).find("option").eq(index).attr("selected","true");
	}
   	
    function save(){
    	var trLength = $(".inputNumber").length;
    	for (var i = 0; i < trLength; i++) {
			if ($(".inputColor")[i].value==null||$(".inputColor")[i].value=="") {
				tipParent("<spring:message code="contract_size_colorNotNull"/>");
				return;
			}
			if ($(".inputNumber")[i].value==null||$(".inputNumber")[i].value=="") {
				tipParent("<spring:message code="contract_size_quantityNotNull"/>");
				return;
			}
		}
    	var selectLength = $(".select2-container").length;
    	/* for (var i = 0; i < selectLength; i++) {
    		var spanText = $("div.select2-container").find(".select2-chosen")[i].value;
    		var selectObj = $("select.select2-offscreen")[i];
    		$(selectObj).find("option").attr("selected",false);
    		$(selectObj).find("option[value='"+spanText+"']").attr("selected","selected");
		} */
    	
    	$('#tableSelect').find("div").remove(".select2-container");
    	var index = $("#index").val();
    	//var realIndex = $("#realIndex").val();
    	var styleSizeLength = $(".tab-kscm").length;
    	var sum = parseInt(0);
    	if (styleSizeLength>1) {
    		for (var i = 0; i < styleSizeLength-1; i++) {
    			var inputNumber = $(".inputNumber")[i].value;
    			inputNumber = inputNumber.replace(/,/g, "");
    			sum += parseInt(inputNumber);
			}
		}
    	/* for (var j = 0; j < styleSize.length; j++) {
			html += "<input type='hidden' name='bigcargoOrderList["+realIndex+"].sizeColorQuantity.sizeColorQuantityList["+j+"].indentSizeCD' value='"+document.getElementsByName("styleSize")[j].value+"'/>";
			html += "<input type='hidden' name='bigcargoOrderList["+realIndex+"].sizeColorQuantity.sizeColorQuantityList["+j+"].indentColorName' value='"+document.getElementsByName("color")[j].value+"'/>";
			html += "<input type='hidden' name='bigcargoOrderList["+realIndex+"].sizeColorQuantity.sizeColorQuantityList["+j+"].indentNumber' value='"+document.getElementsByName("quantity")[j].value+"'/>";
		} */

    	var html = $("#colorList").html();
    	window.parent.frames[parentIndex].$("tbody").find("tr.table-TR")[index].children[7].firstChild.value = sum;
    	formatMoney(window.parent.frames[parentIndex].$("tbody").find("tr.table-TR")[index].children[7].firstChild,2);
    	window.parent.frames[parentIndex].$("tbody").find("tr.table-TR")[index].children[9].childNodes[0].innerHTML = html;
    	window.parent.frames[parentIndex].myMath(obj,index);
    	closeWin();
    }
    
    /* function imageList(styleID,styleFile) {
    	url = "?styleID="+styleID+"&styleFile="+styleFile;
    	//var params = {"styleID":styleID,"styleFile":styleFile};
    	$.post("${ctx}/bigcargo/order/findImageList"+url, "", function(result) {
    		var styleImageList = result["imageListHtml"];
    		$("#nameImagePreview").html(styleImageList);
    		$("#nameImagePreview").find("a").remove();
    	}, 'json');
	} */
    function changeValue(t,tValue) {
    	t.defaultValue = tValue;
	}
	
	function addTr(){
		var realIndex = $("#realIndex").val();
		var length = $(".tab-kscm").length;
		if (realIndex==null||realIndex=='') {
			realIndex = length-1;
		}else{
			realIndex = parseInt(realIndex) + 1;
		}
		$("#realIndex").val(realIndex);
		var index = $("#index").val();
		var parentRealIndex = $("#parentRealIndex").val();
		var idName = "select-"+realIndex;
		var nmName = "bigcargoOrderList["+parentRealIndex+"].sizeColorQuantity.sizeColorQuantityList["+realIndex+"].indentSizeCD";
		document.getElementsByTagName("select")[0].id = idName;
		document.getElementsByTagName("select")[0].name = nmName;
		var selectHtml = $("#hiddenSelect").html();
		var html = "";
		html+="<tr>";
		html+="<td class='tab-NO'><img src='${ctxStatic}/images/del_icon.png' height='25' width='25'  onclick='deleteCurrentRow(this)'></td>";
		html+="<td class='tab-kscm'>"+selectHtml+"</td>";
		html+="<td class='tab-ksys'><input class='inputColor' type='text'  name='bigcargoOrderList["+parentRealIndex+"].sizeColorQuantity.sizeColorQuantityList["+realIndex+"].indentColorName' value='' onblur='changeValue(this,this.value);'/></td>";
		html+="<td class='tab-kssl'><input class='inputNumber' type='text' name='bigcargoOrderList["+parentRealIndex+"].sizeColorQuantity.sizeColorQuantityList["+realIndex+"].indentNumber' value='<fmt:formatNumber value='' pattern='#,##0'/>' onblur='formatNumber(this);changeValue(this,this.value);' onfocus='unFormat(this)'  /></td>";
		html+="</tr>";
		$("#colorList").append(html);
		document.getElementsByTagName("select")[0].id = "";
		document.getElementsByTagName("select")[0].name = "";
		$('#'+idName).select2();
		
	}
	
	
    </script>
    
    <style type="text/css">
    .tableScrollSm .tab-NO{width: 90px;}
    .tableScrollSm .tab-kscm{width: 250px;}
    .tableScrollSm .tab-ksys{width: 240px;}
    .tableScrollSm .tab-kssl{width: 250px;}
    </style>
</head>
<body>
<c:set value="<%=ResourcesUtil.getConfig(\"reserver_meterial_ok\")%>" var="auditOK"/>
<input type="hidden" id="auditStatus" name="status" value="${bigcargoOrder.status }"/>
<!-- 创建编辑头部 -->   
<div id="createHead" class="layerHeader clearfix">
 
		<p class="headerTitle"><spring:message code="contract_size_select"/></p>
	
    <div class="headerButton clearfix">
    <c:if test="${bigcargoOrder.status ne auditOK }">
        <button type="button" onclick="save();"><spring:message code="btn_ok"/></button>
    </c:if>
        <button type="button" onclick="closeWin()"><spring:message code="btn_cancle"/></button>
    </div>
</div>


<div  class="tabBoxSm" >
	<input type="hidden" id="index" value="${bigcargoOrder.index }">
	<input type="hidden" id="parentRealIndex" value="${bigcargoOrder.realIndex }">
	<input type="hidden" id="realIndex" value="">
    <div class="tabSm smOrderBox">
        <div class="clearfix showHtml">
        	<div class="left w-350">
            	<div class="items clearfix">        	
                    <div class="clearfix">
                        <p class="tit"><spring:message code="contract_size_styleNo"/></p>
                        <input id="" name=""  value="${bigcargoOrder.styleNO }" style="width: 250px;">
                    </div>
                </div>
                <div class="items clearfix">        	
                    <div class="clearfix">
                        <p class="tit"><spring:message code="contract_size_customerNo"/></p>
                        <input id="" name=""  value="${bigcargoOrder.styleCustomerNo }" style="width: 250px;">
                    </div>
                </div>
                <div class="items clearfix">        	
                    <div class="clearfix">
                        <p class="tit"><spring:message code="contract_size_styleName"/></p>
                        <input id="" name=""  value="${bigcargoOrder.styleNameCN }" style="width: 250px;">
                    </div>
                </div>
            </div>
            <div class="right w-500">           	
                 <div class="items clearfix haveToBox">        	
                    <div class="clearfix">
                        <p class="tit"><spring:message code="contract_size_styleCatgory"/></p>
                        <input id="" name=""  value="${fns:getDictName(bigcargoOrder.styleCatgoryCD) }" style="width: 250px;">
                    </div>
                </div>
                 <div class="items clearfix">        	
                    <div class="clearfix">
                        <p class="tit"><spring:message code="contract_size_styleCustomer"/></p>
                        <input id="" name=""  value="${bigcargoOrder.styleCustomerName }" style="width: 250px;">
                    </div>
                </div>
                <div class="items clearfix">        	
                    <div class="clearfix">
                        <p class="tit"><spring:message code="contract_size_styleSizeGroup"/></p>
                        <input id="" name=""  value="${fns:getDictName(bigcargoOrder.styleSizeGroupCD) }" style="width: 250px;">
                    </div>
                </div>
                
            	<%-- <div class="items clearfix">
						<p class="tit"><spring:message code="contract_size_styleImage"/></p>
						<div class="styleImgBg clearfix" style="width: 310px; height: 300px; padding-top: 30px; margin-left: 25px; float: left;">
							<div class="squareBtn squareL" style="margin-left: -85px;margin-top:-57px">
								<img src="${ctxStatic}/images/btn_left.png">
							</div>
						       <div class="square" style="width: 330px; height: 230px; margin-top: -1px; margin-left: -30px;">
							   <input type="hidden" id="nameImage" name="myStyleFile" value="${myStyleFileTemp}" htmlEscape="false" class="input-xlarge" />
							   <sys:ckfinder input="nameImage" type="images"  uploadPath="/bigcargoStyle" selectMultiple="true" maxWidth="255" maxHeight="255" />
						       </div>
							<div class="squareBtn squareR" style="margin-top:-287px;margin-left:300px">
								<img src="${ctxStatic}/images/btn_right.png">
							</div>
						</div>
					</div> --%>
            </div>
        </div>
        <div class="" style="margin-top:5px;margin-bottom:5px;">
        	<div style="float: left;margin-top:7px;" >
        	 	<p class="tit" ><spring:message code="contract_size_sizeList"/></p>
         	</div>
         	<div class="" style="height: 30px;">
         		<!-- <button type="button" style="margin-left: 10px;background: linear-gradient(180deg, #757776, #333);border: none;color: #fff;height: 25px;border-radius: 2px" onclick="addTr();">添加一行</button> -->
         		<img class="" src="${ctxStatic}/images/btn_add.png" style="margin-left: 10px;" height='30' width='30' onclick="addTr();">
         	</div>
         </div>
         		<div id="hiddenSelect" class="none">
                	<select style="width: 240px;" onchange="selectChange(this)">
                		<c:forEach items="${bigcargoOrder.bigcargoOrderList }" var="sizeList">
                			<option value="${sizeList.styleSizeCD }">${fns:getDictName(sizeList.styleSizeCD) }</option>
                		</c:forEach>
                	</select>
                </div>
         <div class="tableArea tabBoxSm">
        	<div id="tableSelect" class="tableScrollSm" style="overflow: auto;height: 370px;width: 848px;" > 
        		<table cellpadding="0" class="tableHead" style="z-index: 9999;">
                    <thead>
                    <tr>
                    	<th class="tab-NO"><spring:message code="common_no"/></th>
                        <th class="tab-kscm"><spring:message code="contract_size_size"/></th>
                        <th class="tab-ksys"><spring:message code="contract_size_color"/></th>
                        <th class="tab-kssl"><spring:message code="contract_size_quantity"/></th>
                    </tr>
                    </thead>
                </table>
                <table  id="colorList" cellpadding="0" class="tableBody" >
                   <%--  <tbody >
                    <c:forEach items="${bigcargoOrder.bigcargoOrderList }" var="size" varStatus="status">
                    <tr>
                    	<td class="tab-NO">${status.count }</td>
                        <td class="tab-kscm"><select class="tab-kscm" id="" name=""><c:forEach items="${bigcargoOrder.bigcargoOrderList }" var="orderList"><option value="${orderList.styleSizeCD }" <c:if test="${orderList.styleSizeCD==size.styleSizeCD }">selected="selected"</c:if>>${fns:getDictName(orderList.styleSizeCD) }</option></c:forEach></select></td>
                        <td class="tab-ksys"><input name="indentColorName" value=""/></td>
                        <td class="tab-kssl"><input class="inputQuantity" name="indentNumber" value=""/></td>
                        <input type="hidden" name="styleSize" value="${size.styleSizeCD }"/>
                    </tr>
                   </c:forEach>
                    </tbody>  --%>
                </table>
            </div>
        </div>
	</div>
</div>
<script>
$('.squareL').on('click', function() {
    var lastCon = $('.square ol li:last-child').detach();
    $('.square ol').prepend(lastCon)
    $('.square ol li:last-child').addClass('active')
    $('.square ol li:last-child').siblings().removeClass('active')
})

$('.squareR').on('click', function() {
    var lastCon = $('.square ol li:first-child').detach();
    $('.square ol').append(lastCon)
    $('.square ol li:last-child').addClass('active')
    $('.square ol li:last-child').siblings().removeClass('active')
})
</script>
</body>
</html>
